<template>
 <div id="cascadeLabel">
   <span class="lab" @click.stop="openCasade">级联关系</span>
   <cascade :title="'设置级联'" :visible="visible" :width="'80%'"></cascade>
 </div>
</template>

<script>
/**
 * props面板中，级联的构造UI， 已无用
 */
import cascade from './cascade'
import _S from '@/config/s'
export default {
  name: 'cascadeLabel',
  data () {
    return {
      visible: false
    }
  },
  props: {
    mine: {
      type: Object
    }
  },
  methods: {
    openCasade () {
      if (!this.$store.state.indexPath.indexCom.mine.business) {
        return this.$alert('请选择字段名').catch((_) => {
          console.log(_)
        })
      }
      this.visible = true
    }
  },
  mounted () {
    _S.$on('visible', (val) => {
      this.visible = val
      this.$forceUpdate()
    })
  },
  components: {
    cascade
  }
}
</script>

<style scoped lang="stylus">
#cascadeLabel
  width: 100%
  .lab
    display: flex
    height: 1.8rem
    width: 100%
    justify-content: center !important
    align-items: center
    border: 1px solid rgba(195, 195, 195, 0.8)
    cursor: pointer
</style>
